<template>
    <div>
        <div class="container">
            <h2 v-if="!isAdd">校 友 活 动 编 辑</h2>
            <h2 v-else>添 加 校 友 活 动</h2>
            <el-form ref="form" :model="activity" label-width="100px">
                <el-form-item label="活动ID" v-if="!isAdd">
                    <el-input v-model="activity.activityId" disabled></el-input>
                </el-form-item>
                <el-form-item label="活动名称">
                    <el-input v-model="activity.activityName"></el-input>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-input v-model="activity.activityTime"></el-input>
                </el-form-item>
                <el-form-item label="活动地址">
                    <el-input v-model="activity.address"></el-input>
                </el-form-item>
                <el-form-item label="人数限制">
                    <el-input v-model="activity.limitPerson"></el-input>
                </el-form-item>
                <el-form-item label="用户浏览量" v-if="!isAdd">
                    <el-input v-model="activity.views" disabled></el-input>
                </el-form-item>
                <el-form-item label="发起人" v-if="!isAdd">
                    <el-input :value="activity.createOne ? activity.createOne.nick : ''" disabled></el-input>
                </el-form-item>
                <el-form-item label="发起时间" v-if="!isAdd">
                    <el-input v-model="activity.createTime" disabled></el-input>
                </el-form-item>
                <el-form-item label="更新人" v-if="!isAdd">
                    <el-input :value="activity.updateBy ? activity.updateOne.nick : '暂无更新'" disabled></el-input>
                </el-form-item>
                <el-form-item label="更新时间" v-if="!isAdd">
                    <el-input :value="activity.updateTime ? activity.updateTime : '暂无更新'" disabled></el-input>
                </el-form-item>
                <el-form-item label="活动状态">
                    <el-radio-group v-model="activity.state">
                        <el-radio :label="1">可见</el-radio>
                        <el-radio :label="0">不可见</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动内容"></el-form-item>
            </el-form>
            <div class="details">
                <el-upload
                        v-show="false"
                        class="imgUpload"
                        :action="imgUploadUrl"
                        name="img"
                        accept="image/*"
                        :show-file-list="false"
                        :multiple="false"
                        :on-success="onSuccess">
                </el-upload>
                <quill-editor
                        ref="QuillEditor"
                        v-model="activity.activityDetails"
                        :options="editorOption"
                        @change="onEditorChange"
                >
                </quill-editor>
            </div>
            <div class="saveEdit">
                <el-button v-if="!isAdd" type="primary" @click="saveEdit" :disabled="flagChange<2">保存修改</el-button>
                <el-button v-else type="primary" @click="saveAdd" :disabled="flagChange<2">添加校友活动</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import { getRequest, postRequest } from '../../api';
    import { getTime } from '../../utils/dateTimeUtil';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    import Quill from 'quill';
    import ImageResize from 'quill-image-resize-module';
    import { ImageDrop } from 'quill-image-drop-module';
    import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module';

    Quill.register('modules/imageDrop', ImageDrop);
    Quill.register('modules/imageResize', ImageResize);
    Quill.register('modules/imageExtend', ImageExtend);
    import { addQuillTitle, editorModules } from '../../utils/quillEditor';
    export default {
        name: 'NewsEdit',
        data(){
            return {
                activity: {
                    activityName: '',
                    activityDetails: '',
                    activityTime: '',
                    address: '',
                    limitPerson: 0,
                    createBy: 0,
                    createTime: '',
                    state: 1
                },
                userId: Number(sessionStorage.getItem('userId')),
                userNick: sessionStorage.getItem('userNick'),
                flagChange: 0,
                editorOption: {
                    placeholder: '请输入校友活动内容',
                    theme: 'snow',
                    modules: editorModules
                },
                imgUploadUrl: '/api/saveImageToServer',
                serverUrl: 'http://localhost:8888',
                isAdd: false
            }
        },
        created() {
            const isAdd = this.$route.query.isAdd;
            if(isAdd){
                this.isAdd=true;
            }else{
                this.getData();
            }
        },
        watch: {
            activity: {
                handler(val){
                    this.flagChange++;
                },
                deep: true
            }
        },
        components: {
            quillEditor
        },
        mounted() {
            addQuillTitle();
        },
        methods: {
            getData(){
                const activityId=this.$route.query.activityId;
                getRequest('/getActivityDetail', {activityId: activityId}).then(res=>{
                    if(res){
                        this.activity=res;
                    }
                })
            },
            saveEdit(){
                this.$confirm(`确定要保存对活动 "${this.activity.activityName}" 的修改吗？`,'提示', {type: 'warning'}).then(()=>{
                    this.activity.updateTime=getTime(new Date());
                    this.activity.updateBy=this.userId;
                    this.activity.updateOne={nick: this.userNick};
                    let data=JSON.parse(JSON.stringify(this.activity));
                    data.createOne=null;
                    data.updateOne=null;
                    data.imgList=null;
                    postRequest('/updateActivity', data).then(res=>{
                        if(res==='success'){
                            this.$message.success('保存成功！');
                        }else{
                            console.log('操作失败!');
                        }
                    })
                })
            },
            saveAdd(){
                if(this.activity.activityName==='' || this.activity.activityDetails===''){
                    this.$message.error('活动名称和内容不能为空！');
                    return false;
                }
                this.activity.createBy=this.userId;
                this.activity.createTime=getTime(new Date());
                postRequest('/addActivity', this.activity).then(res=>{
                    if(res==='success'){
                        this.$message.success('添加成功！');
                    }else{
                        this.$message.error('保存失败！');
                    }
                })
            },
            onSuccess(res) {
                // 获取富文本组件实例
                let quill = this.$refs.QuillEditor.quill;
                // 如果上传成功
                if (res) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片，res为服务器返回的图片链接地址
                    const url = this.serverUrl + res;
                    quill.insertEmbed(length, 'image', url);
                    // 调整光标到最后
                    quill.setSelection(length + 1);
                } else {
                    // 提示信息，需引入Message
                    this.$message.error('图片插入失败！');
                }
            },
            onEditorChange(event) {

            }
        }
    };
</script>

<style scoped>
    h2{
        text-align: center;
        margin-bottom: 30px;
        color: #2d8cf0;
    }
    .saveEdit{
        text-align: center;
        margin-top: 20px;
    }
    .el-form{

        margin: 0 auto;
    }
</style>